<template>
    <div>
        <el-dialog title="添加分类" :visible.sync="showaddtCategoryDialog" width="50%" @close='resetAddDialog'>
      <el-form
        :model="categoryInfo"
        label-width="80px"
        ref="categoryAddForm"
        
      >
        <el-form-item prop="cat_name" label="角色名称" :rules="[{required:true,message:'分类名不能为空',trigger:'blur'}]">
          <el-input
            v-model="categoryInfo.cat_name"
            placeholder="请输入分类名称"
          ></el-input>
        </el-form-item>
        <el-form-item prop="roleDesc" label="角色描述">
                <div class="block">
  <el-cascader
    v-model="categoryIds"
    :options="categoryList"
    :props="options"
    clearable
    @change="handleChange"></el-cascader>
</div>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="showaddtCategoryDialog=false">取 消</el-button>
        <el-button type="primary" @click="addCategory">提交</el-button>
      </span>
    </el-dialog>
    </div>
</template>

<script>
import {getGoodsCate,addCategoryByAxios} from 'network/axios'
export default {
            name:'AddCategory',
            created(){
                this.$bus.$on('popupDialog',()=>{
                    this.showaddtCategoryDialog=true
                }),
                getGoodsCate({type:2}).then(res=>{
                    this.categoryList=res.data.data
                })

            },
            data(){
               return {
                   //控制添加分类对话框的显示与关闭
                    showaddtCategoryDialog:false,
                    categoryInfo:{
                        cat_name:'',
                        cat_pid:0,
                        cat_level:0
                    },
                    //选中的那个节点和的id,若该节点有父节点,则返回一个数组
                    categoryIds:[],
                    //获取分类商品的列表
                    categoryList:[],
                    //级联选择器的配置选项
                    options:{
                        expandTrigger:'hover',
                        checkStrictly:true,
                        label:'cat_name',
                        value:'cat_id',
                        children:'children',
                    },         
                    }
            },
            methods:{
                handleChange(){
                  //如果没有选择任何分类,categoryIds长度肯定是0
                        if(this.categoryIds.length==0){
                          this.categoryInfo.cat_pid=0
                          this.categoryInfo.cat_level=0
                        }else{
                          //获得父id
                          this.categoryInfo.cat_pid=(this.categoryIds.slice(-1))[0]
                          this.categoryInfo.cat_level=this.categoryIds.length
                        }
                        
                },
                //点击确定触发该函数,效验是否添加分类成功,做出相应提示
                addCategory(){
                  this.$refs.categoryAddForm.validate(flag=>{
                              if(!flag){
                                return this.$message.error('请根据提示输入有效的数据')
                              }else{
                                   addCategoryByAxios(this.categoryInfo).then(res=>{
                        if(res.data.meta.status!=201){
                          this.$message.error('添加分类失败')
                        }else{
                          this.$message.success("添加分类成功")
                          this.$emit('addCategorySuccess')
                          this.showaddtCategoryDialog=false
                        }
                      })
                              }
                  })
                     
                },
                //对话框关闭要重置添加分类里面的所有内容
                resetAddDialog(){
                  this.$refs.categoryAddForm.resetFields()
                  this.categoryIds=[]
                  this.categoryInfo.cat_pid=0
                      this.categoryInfo.cat_level=0
                  this.showaddtCategoryDialog=false
                }
            }
           
}
</script>

<style>

</style>